<template>
  <nav>
    <div class="title">
      <el-icon style="font-size: 30px" color="#fff"><burger /></el-icon>
      <h2>餐饮后台管理</h2>
    </div>

    <div>
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            active-text-color="#f00"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="/restback/index"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
          >
            <el-menu-item index="/restback/index">
              <el-icon><icon-menu /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/restback/menu">
              <el-icon><icon-menu /></el-icon>
              <span>创建菜单</span>
            </el-menu-item>
            <el-menu-item index="/restback/order">
              <el-icon><icon-menu /></el-icon>
              <span>预定管理</span>
            </el-menu-item>
            <el-menu-item index="/restback/search">
              <el-icon><icon-menu /></el-icon>
              <span>查询列表</span>
            </el-menu-item>
            <el-menu-item index="/restback/worker">
              <el-icon><icon-menu /></el-icon>
              <span>员工管理</span>
            </el-menu-item>
            <el-menu-item index="/restback/inventory">
              <el-icon><icon-menu /></el-icon>
              <span>库存管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </nav>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Burger } from "@element-plus/icons-vue";
// import {
//   Location,
//   Document,
//   Menu as IconMenu,
//   Setting,
// } from "@element-plus/icons-vue";

export default defineComponent({
  components: {
    Burger,
  },
  setup() {
    let actidx: number | string = "1";
    const handleOpen = (key: any, keyPath: any) => {
      console.log(key, keyPath);
    };
    const handleClose = (key: any, keyPath: any) => {
      console.log(key, keyPath);
    };
    function clickactive(params: number | string) {
      actidx = params;
      console.log("触发了");
    }
    return {
      handleOpen,
      handleClose,
      actidx,
    };
  },
});
</script>

<style lang="scss">
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

.tac {
  overflow: hidden;
}
nav {
  padding: 3px;
}
.el-sub-menu__title {
  text-indent: 20px;
}
.el-sub-menu__icon-arrow {
  display: none;
}

// .el-menu .is-active {
//   background-color: red;
//   border: salmon 2px solid;
// }

.el-menu-item {
  font-size: 18px;
  font-family: MicrosoftYaHei;
  background-color: #2a2b3d;
  color: #a5a5a5;
  span {
    position: relative;
    z-index: 2;
  }
  &:hover {
    background: #575a71;
  }
}
.el-menu-item::before {
  content: "";
  display: none;
  position: absolute;
  width: 160px;
  height: 40px;
  background: #575a71;
  border-radius: 20px;
  left: 10px;
}

.el-menu .is-active {
  background-color: #2a2b3d;
  color: #ffffff;
  // border: salmon 2px solid;
}

.el-menu .is-active::after {
  content: "";
  display: block;
  position: absolute;
  width: 160px;
  height: 40px;
  background: #575a71;
  border-radius: 20px;
  left: 10px;
}

h2 {
  width: 151px;
  height: 56px;
  line-height: 56px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  vertical-align: middle;
}
.title {
  display: flex;
  margin-bottom: 33px;
  align-items: center;
  justify-content: space-evenly;
  .el-icon {
    vertical-align: middle;
  }
}
</style>
